<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>flex布局</title>
		<style>
			.bigbox{
				/* 设置为弹性盒子flex */
				display: flex;
				/* 决定主轴方向:
				  1.row:默认值,水平方向,从左往右
				  2.row-reverse:水平方向,从右往左
				  3.column:垂直，从上往下
				  4.column-reverse：垂直，从上往下
				  */
				/* flex-direction: row; */
				/* 决定主轴换行
				  1.nowarp:不换行 
				  2.wrap:换行
				  3.wrap-reverse:换行且反转
				  */
				/* flex-wrap: wrap-reverse; */
				/* 符合写法 */
				flex-flow: row wrap;
				/* 项目在主轴的排列:justify-content:
				      1.flex-start:从主轴的开始位置排,默认值
					  2.flex-end:从主轴的结束位置排
					  3.center:在主轴上居中
					  4.space-between:两端对齐,重点
					  5.space-arround:环绕对齐,拉手对齐 
					  6.
					  
					  */
				justify-content: flex-start;
				width: 1300px;
				height: 600px;
				border: 1px solid gray;
				margin: auto;
			}
			.bigbox div{
				width: 200px;
				height: 200px;
				border: 1px solid red;
				font-size: 34px;
				text-align: center;
				line-height: 200px;
			}
			
		</style>
	</head>
	<body>
		<div class="bigbox">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</body>
</html>
